<template>
    <div>
      <x-header title="系统消息" style="background-color: #33bb99;">
        <span slot="overwrite-left" @click="back" class="iconfont icon-shangyiyedanjiantou" style="color: #fff;font-size: 22px;"></span>
      </x-header>
      <div style="width: 95%;margin:0.5rem auto">
        <button-tab v-model="state" >
          <button-tab-item @on-item-click="getMessageList()" selected><span :class="list!=''&&state==0?'vux-reddot-s':''">新消息</span></button-tab-item>
          <button-tab-item @on-item-click="getMessageList()">已读消息</button-tab-item>
        </button-tab>
        <divider v-if="list==''">{{state==0?'暂无未读消息':'暂无已读消息'}}</divider>
        <!--系统消息列表-->
        <panel v-if="isShow" :list="list" :type="type" @on-click-item="messageDetail"></panel>
      </div>
      <!--系统消息详情-->
      <div v-transfer-dom >
        <popup v-model="idDetail" height="50%">
          <popup-header style="background: #fff;" right-text="取消" title="系统消息详情" @on-click-right="idDetail = false"></popup-header>
          <div class="popup1">
            <group>
              <card>
                <div slot="content" class="card-padding">
                  <p style="color:#999;font-size:12px;">创建人：{{detail.create_user_name}}<span style="float: right;">{{detail.create_time}}</span></p>
                  <p style="font-size:14px;line-height:1.5;padding:10px 0;">{{detail.content}}</p>
                  <p style="color:#999;font-size:12px;float: right;">{{detail.read_time}}（已读）</p>
                </div>
              </card>
            </group>
          </div>
        </popup>
      </div>
    </div>
</template>

<script>
  import { ButtonTab, ButtonTabItem, Panel, Card, Popup, PopupHeader, Group } from 'vux'
  export default {
    name: "",
    components: {
      ButtonTab, ButtonTabItem, Panel, Card, Popup, PopupHeader, Group
    },
    data(){
      return {
        type: '4',
        state:0,
        list:[],
        isShow:false,
        idDetail:false,
        detail:''
      }
    },
    created(){
      this.getMessageList()
    },
    methods:{
      // 查看系统消息详情
      messageDetail(item){
        this.idDetail = true
        this.$vux.loading.show({
          text: 'Loading'
        });
        this.config0.get('/supply/appNotice/findById', {
          id:item.id
        }).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==0){
            this.detail = res.data.generalNotice
          }else{
            this.msg(this.config0.handleError(res.data));
          }
        }).catch(err=>{
          this.$vux.loading.hide();
          this.msg('网络错误');
        })
      },
      // 获取系统消息列表——0（未读）、1（已读）
      getMessageList(){
        this.list = []
        this.$vux.loading.show({
          text: 'Loading'
        });
        this.config0.post('/supply/appNotice/findNoticeList', {
          state:this.state
        }).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==0){
            $.each(res.data.noticeList,(index,item)=>{
              item.desc = item.content
              item.meta = {
                source: item.create_user_name,
                date: item.create_time,
                other: item.read_time
              }
              this.list.push(item)
            })
            // this.list = res.data.noticeList
            this.isShow = true
          }else{
            this.msg(this.config0.handleError(res.data));
          }
        }).catch(err=>{
          this.$vux.loading.hide();
          this.msg('网络错误');
        })
      },
      // 信息提示
      msg(str){
        this.$vux.toast.show({
          type: 'text',
          text: str,
          position: 'default',
          time: 800,
        });
      },
      // 返回
      back(){
        this.$router.push('/project0/view2/mine');
      },
    }
  }
</script>

<style scoped>
  @import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
  .vux-button-group > a.vux-button-group-current{
    background: #33bb99!important;
  }
  .vux-button-group{
    border-color: #33bb99!important;
  }
  .vux-popup-dialog{
    background: #fbf9fe !important;
  }
  .card-padding{
    padding:20px 10px;
  }
</style>
